<template>
  <div>
    <nav class="toback">
       <router-link to="/repayment">
         <Icon type="chevron-left" class="toleft" />
       </router-link>
       <p class="searc                                                                     h"></p>
       <p>我要提额</p>
    </nav>

      <div class="wykh_span">
        <div class="wykh_text">我想要提升的额度：</div>
        <div class="wykh_input">
          <input type="text" v-model="wantMoney" placeholder="请输入我想要提升的额度"/></div>
        <hr class="wykh_hr"/>
      </div>

      <div class="wykh_span">
        <div class="wykh_text">发卡行：</div>
        <div class="wykh_input">
          <input type="text" v-model="bankName" placeholder="请输入发卡行"/></div>
        <hr class="wykh_hr"/>
      </div>

      <div class="wykh_span">
        <div class="wykh_text">卡号：</div>
        <div class="wykh_input">
          <input type="text" v-model="cardId" placeholder="请输入卡号"/></div>
        <hr class="wykh_hr"/>
      </div>

      <div class="wykh_span">
        <div class="wykh_text">信用卡额度：</div>
        <div class="wykh_input">
          <input type="text" v-model="maxMoney" placeholder="请输入您的信用卡额度"/></div>
        <hr class="wykh_hr"/>
      </div>

      <div class="wykh_span">
        <div class="wykh_text">现可用额度：</div>
        <div class="wykh_input">
          <input type="text" v-model="currentMoney" placeholder="请输入可用额度"/></div>
        <hr class="wykh_hr"/>
      </div>

      <div class="wykh_span">
        <div class="wykh_text">有效日期：</div>
        <div class="wykh_input">
          <input type="text" v-model="validData" placeholder="例如：2020.03"/></div>
        <hr class="wykh_hr"/>
      </div>

      <div class="mtext">
        请保持电话畅通，专业人士10分钟内与您联系。服务不收取任何费用，投诉电话400-8888-8888
      </div>

    <div class="btn" @click="handleSubmit">确定</div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import axios from "axios";
export default {
  name: "Wyte",
  data() {
    return {
        bankName: "",
        currentMoney: "",
        wantMoney: "",
        maxMoney: "",
        validData: "",
        cardId:"",
    };
  },
  methods: {
    jianyan(){
      if(this.bankName === ''){
        this.$Message.success("请输入银行名称");
        return false;
      }else if(this.cardId === ''){
        this.$Message.success("请输入卡号");
        return false;
      }else if(this.currentMoney === ''){
        this.$Message.success("请输入当前额度");
        return false;
      }else if(this.wantMoney === ''){
        this.$Message.success("请输入期望额度");
        return false;
      }else if(this.maxMoney === ''){
        this.$Message.success("请输入可用额度");
        return false;
      }else if(this.validData === ''){
        this.$Message.success("请输入有效日期");
        return false;
      }else{
        return true
      }
    },
    handleSubmit() {
      if(this.jianyan()){
        axios.post('/web/api/raise/add',{
          "wantMoney":this.wantMoney,
          "currentMoney":this.currentMoney,
          "maxMoney":this.maxMoney,
          "bankName":this.bankName,
          "validData":this.validData,
          "userId":this.$store.state.user.userId,
          "cardId":this.cardId,
          "userName":this.$store.state.user.username,
          "phone":this.$store.state.user.phone,
          }).then(this.handleAddInfoSucc)
      }
    },
    handleAddInfoSucc(res){
      console.log('res', res)
      this.$Message.success(res.data.message)
      this.$router.push({path:"/"});
    }
  }
};
</script>
<style lang="stylus" scoped>
.toback {
  width: 100%;
  font-size: 1.8rem;
  line-height: 2.6;
  background: #358ff0;

  p {
    text-align: center;
    color: #ffffff;
  }

  .toleft {
    float: left;
    font-size: 2.2rem;
    color: #ffffff;
    padding: 1rem 2rem;
  }

  .search {
    width: 5rem;
    color: #ffffff;
    height: 2.2rem;
    line-height: 2.6;
    float: right;
    font-size: 1.8rem;
  }
}

.wykh_span {
  margin-top: 1rem;
  width: 100%;

  .wykh_text {
    width: 40%;
    height: 1.5rem;
    margin-left: 1rem;
    font-size: 0.8rem;
    line-height: 1.5rem;
    color: #666666;

    .add {
      color: #ff3737;
      float: right;
      padding-right: 1.5rem;
      font-size: 1.5rem;
    }
  }

  .wykh_input {
    margin-left: 1rem;
    height: 4rem;
    line-height: 4rem;

    input {
      margin-left: 1rem;
      width: 17rem;
      height: 2.5rem;
      border: none;
      outline: none;
      color: #666666;
    }

    input::-webkit-input-placeholder {
      color: #cccccc;
    }

    select {
      margin-left: 1rem;
      width: 90%;
      height: 2.5rem;
      border: none;
      outline: none;
      appearance: none;
      color: #666666;
    }

    .wykh_input_line {
      width: 100%;
      height: 2.5rem;
      line-height: 2.5rem;

      .wykh_input_chry {
        position: relative;
        margin-left: 3%;
        margin-right: 3%;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        float: left;
        width: 14%;
        height: 1.5rem;
        line-height: 1.5rem;
        text-align: center;
        border: 1.5px solid #FF3737;
        border-radius: 0.5rem;
        color: #666666;

        .wykh_input_chry_close {
          position: absolute;
          background: red;
          color: #ffffff;
          width: 0.8rem;
          height: 0.8rem;
          font-size: 0.5rem;
          line-height: 0.9rem;
          margin-top: -1.9rem;
          right: -5px;
          font-size: 0.5rem;
          -webkit-text-size-adjust: none;
          border-radius: 30%;
        }
      }
    }
  }

  .wykh_hr {
    margin-left: 4%;
    width: 92%;
    height: 1px;
    border: none;
    border-top: 1px solid #cccccc;
  }
}

.mtext{
  margin :2rem 2rem;
}

.btn {
  margin-top: 2rem;
  margin-left: 10%;
  width: 80%;
  height: 2.8rem;
  background: #3b83c5;
  text-align: center;
  line-height: 2.8rem;
  color: #ffffff;
  border-radius: 2rem;
}
</style>

